<!--
 * @Author: Yang Zhang
 * @Date: 2021-11-18 22:30:00
 * @LastEditors: Yang Zhang
 * @LastEditTime: 2022-01-08 16:47:00
 * @Description: KOL登录页
-->
<template>
  <div class="kol-header flex-sp-c">
    <img class="safarilogo" src="@/assets/logo/IS_slices/logo30.png" />
    <div class="kol-btns flex-sp-c">
      <div class="kol-btn flex-c kol-btn-default login" @click="openLoginModal">log in</div>
      <div class="kol-btn flex-c kol-btn-primary signup" @click="openSignModal">Sign up</div>
    </div>
  </div>

  <div class="kol-main-show">
    <div class="kol-main-show-title">
      <div class="kol-main-show-title-fist">Create your own</div>
      <div class="kol-main-show-title-sec">
        <span class="left">e-commerce</span>
        service
      </div>
    </div>
    <div
      class="kol-main-show-desc"
    >We provide content creators and freelancers with a powerful e-commerce system and a wide range of goods sources. You don’t need to purchase any goods, but you can make recommendations to your fans and sell goods through your own website.</div>

    <div class="kol-btn flex-c kol-btn-primary kol-main-show-btn" @click="openSignModal">Start free</div>

    <div class="kol-main-show-rightimg">
      <img src="@/assets/logo/IS_slices/right_pic.png" />
    </div>
  </div>

  <div class="kol-main-info">
    <div class="kol-main-about">
      <div class="kol-main-about-title">
        About
        <span>IntereStore</span>
      </div>
      <div class="kol-main-about-desc">
        IntereStore provides goods resources and complete e-commerce system services. We will solve your tedious order delivery tasks, and you can regularly enjoy our service of providing samples, which you can use to create your videos or post content, such as unboxing or product reviews.
        More importatly, fan purchase transactions are on your own e-commerce website,it will fully tap the purchasing power of your fans and help you get more income. At the same time, you can also get the freedom to do your work, and the stability you need to build an independent career.
      </div>
    </div>

    <div class="kol-main-whois">
      <div class="whoisleft">
        <img src="@/assets/logo/IS_slices/group22.png" />
      </div>
      <div class="whoisright">
        <img src="@/assets/logo/IS_slices/pic35.png" class="rightbg" />
        <div class="toptitle">
          <div>Who is</div>
          <div>using IntereStore?</div>
        </div>
        <div class="sectitle">
          <div class="item1">Video creator</div>
          <div class="item2">Podcast producer</div>
          <div class="item1">Visual artist</div>
          <div class="item1">Community expert</div>
        </div>
      </div>
    </div>
    <div class="kol-main-pes">
      <div class="kol-main-pes-tit">
        Powerful
        <span>e-commerce</span> system
      </div>
      <div class="kol-main-pes-maininfo">
        <div class="maininfoleft">
          <div class="title">Advantages of our system</div>
          <div class="maininfodesc">
            Create your own e-commerce website
            Personalized page matching and design
            Variety product catalogs
            Professional store themes
            Convenient to share anytime anywhere
            Analyze fan purchase transaction data
            Accumulate your own e-commerce customers
          </div>
        </div>
        <div class="rightimg">
          <img src="@/assets/logo/IS_slices/group22_1.png" />
        </div>
      </div>
    </div>

    <div class="kol-main-apic">
      <div class="mainpic">
        <div class="left">
          <div class="leftstit">Quality escort by global authority</div>
          <div class="leftbigtit">
            <div>Abundant</div>high-quality goods
          </div>
          <div
            class="leftdesc"
          >We rigorously screen for good quality goods from branded goods and factory sources all over the world·Abundant products meet the diverse needs of fans·No need to purchase any goods, one-click transfer the product you selected to your website·Earn rich commission income</div>
        </div>
        <div class="right">
          <div class="img">
            <img src="@/assets/logo/IS_slices/group23_1_.png" />
          </div>
          <div class="img">
            <img src="@/assets/logo/IS_slices/RoundedRectangle4copy.png" />
          </div>
          <div class="img">
            <img src="@/assets/logo/IS_slices/RoundedRectangle4copy2.png" />
          </div>
          <div class="img">
            <img src="@/assets/logo/IS_slices/group26.png" />
          </div>
        </div>
      </div>
    </div>

    <div class="kol-main-cgms">
      <div class="leftcgms">
        <img src="@/assets/logo/IS_slices/group23_2.png" />
      </div>
      <div class="rightcgms">
        <div class="bigtit">
          <span>Comprehensive</span> global management services
        </div>
        <div
          class="sdesc"
        >We provide comprehensive global management services, solving your complicated warehousing and delivery problem, and we offer 24-hour customer service support. You just need to focus on creating content, while it also bringing you more income.</div>
      </div>
    </div>

    <div class="kol-focus">
      <div class="kol-focus-tit">
        <div>Focus on e-commerce</div>monetization of
        <span>content creators</span>
      </div>
      <div class="kol-btn flex-c kol-btn-primary" @click="openSignModal">Start free</div>
      <div class="kol-focus-img" style="display: none;">
        <img src="@/assets/logo/IS_slices/img-List.png" />
      </div>
    </div>
  </div>

  <div class="kol-footer">
    <div class="left">
      <img src="@/assets/logo/IS_slices/pic29.png" class="logo" />
      <div class="copyright">© Copyright 2021 IntereStore</div>
    </div>
    <div class="sec">
      <div class="item">Products</div>
      <div class="item1">About</div>
      <div class="item1">Help</div>
      <div class="item1">Service</div>
      <div class="item1">Privacy Policy</div>
    </div>
    <div class="thire">
      <div class="item">Connect</div>
      <div class="email">interest-store@outlook.com</div>
    </div>
    <div class="right">
      <div class="tit">Find us</div>
      <div class="list">
        <img src="../../assets/logo/IS_slices/facebook.png" class="icon" />
        <img src="../../assets/logo/IS_slices/tiwtter.png" class="icon" />
        <img src="../../assets/logo/IS_slices/instagram-fill.png" class="icon" />
        <img src="../../assets/logo/IS_slices/youtube.png" class="icon" />
      </div>
    </div>
  </div>
  <AuthModal ref="authModal" :type="0" />
  <AuthModal ref="signModal" :type="1" />
</template>

<script lang='ts' setup>
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { reactive, toRefs, onBeforeMount, onMounted, ref } from 'vue'
import type { UnwrapRef } from 'vue';
import type { FormProps } from 'ant-design-vue';
import { message } from 'ant-design-vue'
import AuthModal from './modal/index.vue'
interface DataProps { }


// modal弹出框实例
const authModal = ref()
const signModal = ref()
onMounted(() => {
  console.log(signModal.value)
})

// 登陆相关
const openLoginModal = () => {
  authModal.value.showLoginModal()
}

const openSignModal = () => {
  signModal.value.showLoginModal()
}

</script>
<style lang='scss' scoped>
.kol-header {
  width: 1920px;
  height: 177px;
  padding: 0 106px;
  img {
    width: 260px;
    height: 63px;
  }
  @media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
      .safarilogo {
        height: 1.354167rem;
        width: 0.328125rem;
        transform: rotate(90deg);
        margin-left: 0.552083rem;
      }
    }
  }
  .kol-btns {
    width: 350px;
    height: 65px;
  }
}

.kol-main-show {
  width: 1920px;
  height: 678px;
  background: linear-gradient(178deg, #fbfbff 0%, #fbfbff 100%);
  position: relative;
  .kol-main-show-title {
    // width: 616px;
    height: 118px;
    font-size: 60px;
    font-family: Galvji;
    font-weight: bold;
    color: #070023;
    position: absolute;
    top: 122px;
    left: 360px;
    .kol-main-show-title-sec {
      .left {
        color: #e60044;
      }
    }
  }
  .kol-main-show-desc {
    width: 652px;
    height: 107px;
    font-size: 18px;
    font-family: Arial;
    font-weight: bold;
    color: #6e6b89;
    position: absolute;
    left: 360px;
    top: 313px;
  }
  .kol-main-show-btn {
    position: absolute;
    left: 360px;
    top: 493px;
  }
  .kol-main-show-rightimg {
    width: 951px;
    height: 833px;
    position: absolute;
    top: 0;
    right: 112px;
    img {
      width: 951px;
      height: 833px;
    }
  }
}

.kol-main-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 0 285px;
  .kol-main-about {
    padding: 232px 0 0 0;
    margin-bottom: 162px;
    .kol-main-about-title {
      font-size: 55px;
      font-family: Galvji;
      font-weight: bold;
      color: #000000;
      margin-bottom: 66px;
      span {
        color: #e60044;
      }
    }
    .kol-main-about-desc {
      width: 1152px;
      height: 161px;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #6e6b89;
    }
  }

  .kol-main-whois {
    display: flex;
    .whoisleft {
      width: 606px;
      height: 596px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .whoisright {
      padding-top: 100px;
      padding-left: 89px;
      position: relative;
      .rightbg {
        width: 214px;
        height: 170px;
        position: absolute;
        right: 0;
        top: 80px;
        z-index: -1;
      }
      .toptitle {
        font-size: 55px;
        font-family: Galvji;
        font-weight: bold;
        color: #151329;
        z-index: 10;
        div {
          text-align: left;
        }
      }
      .sectitle {
        font-size: 30px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #6e6b89;
        text-align: left;
        margin-top: 67px;
        .item2 {
          color: #070023;
        }
      }
    }
  }

  .kol-main-pes {
    padding-top: 324px;
    .kol-main-pes-tit {
      font-size: 67px;
      font-family: Galvji;
      font-weight: bold;
      color: #000000;
      span {
        color: #e60044;
      }
    }
    .kol-main-pes-maininfo {
      padding-top: 36px;
      display: flex;
      .maininfoleft {
        padding-top: 85px;
        text-align: left;
        .title {
          font-size: 45px;
          font-family: Galvji;
          font-weight: bold;
          color: #000000;
          margin-bottom: 55px;
        }
        .maininfodesc {
          font-size: 24px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #1b1839;
        }
      }

      .rightimg {
        img {
          width: 976px;
          height: 806px;
        }
      }
    }
  }

  .kol-main-apic {
    .mainpic {
      width: 1350px;
      height: 716px;
      background: url("@/assets/logo/IS_slices/group23_1.png") center no-repeat;
      background-size: 1350px 716px;
      padding: 170px 150px 182px 142px;
      display: flex;
      .left {
        text-align: left;
        flex: 1;
        .leftstit {
          font-size: 18px;
          font-family: Arial;
          font-weight: 400;
          color: #ffffff;
          line-height: 29px;
          opacity: 0.5;
        }
        .leftbigtit {
          font-size: 48px;
          font-family: Galvji;
          font-weight: bold;
          color: #ffffff;
        }
        .leftdesc {
          font-size: 14px;
          font-family: Arial;
          font-weight: 400;
          color: #ffffff;
        }
      }
      .right {
        width: 429px;
        height: 364px;
        display: flex;
        flex-wrap: wrap;
        .img {
          width: 181px;
          height: 153px;
          margin-right: 67px;
          margin-bottom: 58px;
          img {
            width: 181px;
            height: 153px;
          }
        }
        .img:nth-child(2n) {
          margin-right: 0;
        }
      }
    }
  }
  .kol-main-cgms {
    display: flex;
    .leftcgms {
      img {
        width: 653px;
        height: 652px;
      }
    }
    .rightcgms {
      padding-top: 154px;
      text-align: left;
      .bigtit {
        font-size: 50px;
        font-family: Galvji;
        font-weight: bold;
        color: #000;
        margin-bottom: 58px;
        span {
          color: #e60044;
        }
      }
      .sdesc {
        width: 584px;
        font-size: 17px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #6e6b89;
      }
    }
  }

  .kol-focus {
    padding-top: 187px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .kol-focus-tit {
      font-size: 67px;
      font-family: Galvji;
      font-weight: bold;
      color: #000000;
      margin-bottom: 80px;
      span {
        color: #e60044;
      }
    }
    .kol-focus-img {
      width: 1313px;
      height: 976px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.kol-footer {
  height: 580px;
  width: 1920px;
  background: url("@/assets/logo/IS_slices/group23_3.png") 0 no-repeat;
  background-size: 1920px 580px;
  padding-top: 285px;
  display: flex;
  justify-content: center;
  .left {
    margin-right: 114px;
    .logo {
      width: 252px;
      height: 51px;
    }
    .copyright {
      font-size: 19px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-top: 136px;
    }
  }
  .sec {
    font-size: 19px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    margin-right: 71px;
    .item {
      margin-bottom: 44px;
    }
    .item1 {
      margin-bottom: 20px;
    }
  }
  .thire {
    font-size: 19px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    margin-right: 112px;
    .item {
      margin-bottom: 45px;
    }
  }

  .right {
    .tit {
      font-size: 19px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      margin-bottom: 46px;
    }
    .list {
      img {
        margin-right: 25px;
      }
    }
  }
}
</style>
